<template>
	<scroll-view scroll-y class="scroll-lists">
		<view class="agent-form-wrap">

			<view class="agent-form">
				<view class="form-card">
					<view class="card-title">代理商基础信息</view>

					<view class="form">
						<view class="form-item">
							<view class="form-label">姓名<text style="color: red;">*</text></view>
							<view class="form-body">
								<view class="input">
									<input type="text" v-model="formData.linkman" placeholder="请输入您的真实姓名" placeholder-class="placeholder-class" />
								</view>
							</view>
						</view>
						<view class="form-item">
							<view class="form-label">手机号<text style="color: red;">*</text></view>
							<view class="form-body">
								<view class="input">
									<input type="number" v-model="formData.phone" :maxlength="11" placeholder="请输入您的真实手机号" placeholder-class="placeholder-class" />
								</view>
							</view>
						</view>
						<view class="form-item">
							<view class="form-label">身份证号<text style="color: red;">*</text></view>
							<view class="form-body">
								<view class="input">
									<input type="idcard" v-model="formData.id_card_no" placeholder="请输入您的真实身份证号" placeholder-class="placeholder-class" />
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="form-card">
					<view class="card-title">代理商收货地址</view>
					<view class="form">
						<view class="form-item">
							<view class="form-label">联系人<text style="color: red;">*</text></view>
							<view class="form-body">
								<view class="input">
									<input type="text" placeholder="请输入您的真实姓名" placeholder-class="placeholder-class" />
								</view>
							</view>
						</view>
						<view class="form-item">
							<view class="form-label">手机号<text style="color: red;">*</text></view>
							<view class="form-body">
								<view class="input">
									<input type="text" placeholder="请输入您的真实手机号" placeholder-class="placeholder-class" />
								</view>
							</view>
						</view>
						<view class="form-item">
							<view class="form-label">所在地址<text style="color: red;">*</text></view>
							<view class="form-body">
								<view class="input" @click="handleSeleteArea">
									<input type="text" placeholder="请选择所在区域省、市、县区" disabled placeholder-class="placeholder-class" />
									<view class="iconfont icon-chevron-down"></view>
								</view>
							</view>
						</view>
						<view class="form-item">
							<view class="form-label">详细地址<text style="color: red;">*</text></view>
							<view class="form-body">
								<view class="input">
									<input type="text" placeholder="请输入您的真实手机号" placeholder-class="placeholder-class" />
								</view>
							</view>
						</view>
					</view>
				</view> -->

				<view class="form-card">
					<view class="card-title">申请代理点</view>

					<view class="form">
						<view class="form-item">
							<view class="form-label">选择区域<text style="color: red;">*</text></view>
							<view class="form-body">
								<view class="input" @click="openArea">
									<input type="text" disabled :value="formData.province ? `${formData.province}/${formData.city}/${formData.area}` : ''" placeholder="请选择区域" placeholder-class="placeholder-class" />
								</view>
							</view>
						</view>
						<view class="form-item">
							<view class="form-label">学校名称<text style="color: red;">*</text></view>
							<view class="form-body">
								<view class="input">
									<input type="text" v-model="formData.name" placeholder="请输入学校名称" placeholder-class="placeholder-class" />
								</view>
								<view class="hint">学校名称必须和学生证一致</view>
							</view>
						</view>
						<view class="form-item">
							<view class="form-label">学校详细地址<text style="color: red;">*</text></view>
							<view class="form-body">
								<view class="input">
									<input type="text" v-model="formData.address" :disabled="!formData.address" @click="chooseLocation(false)" placeholder="输入学校详细地址" placeholder-class="placeholder-class" />
									<view class="right-btn" @click="chooseLocation(true)">定位</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="form-card">
					<view class="card-title">身份证正反面图片<text style="color: red;">*</text></view>

					<view class="form" style="padding-top: 0;">
						<view class="form-item">
							<!-- <view class="form-label">选择区域</view> -->
							<view class="form-body" style="border: none;padding-bottom: 0;">
								<upload-img ref="uploadImg" :value="formData.identity_card_data" multiple :max="2" module="real_verify" @success="handleUpload($event, 'identity_card_data')" @remove="handleRemove($event, 'identity_card_data')"></upload-img>
							</view>
						</view>
					</view>
				</view>
				<view class="form-card">
					<view class="card-title">学生证正反面图片<text style="color: red;">*</text></view>

					<view class="form" style="padding-top: 0;">
						<view class="form-item">
							<!-- <view class="form-label">选择区域</view> -->
							<view class="form-body" style="border: none;padding-bottom: 0;">
								<upload-img ref="uploadImg" :value="formData.student_card_data" multiple :max="2" module="real_verify" @success="handleUpload($event, 'student_card_data')" @remove="handleRemove($event, 'student_card_data')"></upload-img>
							</view>
						</view>
					</view>
				</view>
				<view class="form-card">
					<view class="card-title">资金大于一万证明<text style="color: red;">*</text><text
							class="sub-title">(银行、微信、支付宝余额截图)</text></view>

					<view class="form" style="padding-top: 0;">
						<view class="form-item">
							<!-- <view class="form-label">选择区域</view> -->
							<view class="form-body" style="border: none;padding-bottom: 0;">
								<upload-img ref="uploadImg" :value="formData.asset_certificate_data" multiple module="real_verify" @success="handleUpload($event, 'asset_certificate_data')" @remove="handleRemove($event, 'asset_certificate_data')"></upload-img>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="form-card">
					<view class="card-title">征信报告截图<text style="color: red;">*</text></view>

					<view class="form" style="padding-top: 0;">
						<view class="form-item">
							<view class="form-body" style="border: none;padding-bottom: 0;">
								<upload-img ref="uploadImg" :value="formData.credit_report_data" multiple module="real_verify" @success="handleUpload($event, 'credit_report_data')" @remove="handleRemove($event, 'credit_report_data')"></upload-img>
							</view>
						</view>
					</view>
				</view> -->

				<view class="form-card">
					<view class="flex align-center justify-between">
						<view class="card-title" style="padding-bottom: 0;">
							<view class="">是否为学校社团成员</view>
							<view class="hint">无人机和摄影相关的社团成员通过率高</view>
						</view>
						<com-switch v-model="formData.is_club_card > 0" @change="mywitch"></com-switch>
					</view>
				</view>
				<view class="form-card" v-if="formData.is_club_card">
					<view class="card-title">证明图片<text style="color: red;">*</text></view>

					<view class="form" style="padding-top: 0;">
						<view class="form-item">
							<!-- <view class="form-label">选择区域</view> -->
							<view class="form-body" style="border: none;padding-bottom: 0;">
								<upload-img ref="uploadImg" :value="formData.club_card_data" multiple module="real_verify" @success="handleUpload($event, 'club_card_data')" @remove="handleRemove($event, 'club_card_data')"></upload-img>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="footer-btns">
				<button class="cancel" @click="save">保存</button>
				<button class="confirm" @click="next">下一步</button>
			</view>
		</view>
		
		<area-picker ref="area" @change="handleSeleteArea"></area-picker>
	</scroll-view>
</template>

<script>
	import AddressParse from 'address-parse';
	const checker = require("@/utils/checker.js");
	import provinceData from '@/libs/city-data/province.js';
	import cityData from '@/libs/city-data/city.js';
	import areaData from '@/libs/city-data/area.js';
	
	export default {
		name: 'agent-form',
		props: {
			type: String,
			default: 'add'
		},
		data() {
			return {
				isChecked: false,
				formData: {
					status: 1, // integer  可选 状态：0草稿；1正式 示例值: 1
					name: '', // string  名称 可选
					id_card_no: '', // string  身份证号 可选
					linkman: '', // string  姓名 可选
					phone: '', // string  联系电话 可选
					province: '', // string  省 可选
					provinceCode: '', // string  省编号 可选
					city: '', // string  市 可选
					cityCode: '', // string  市编号 可选
					area: '', // string  区/县 可选
					areaCode: '', // string  区/县编号 可选
					address: '', // string  可选 详细地址（200字内）
					
					longitude: '', // number  经度坐标 可选
					latitude: '', // number  纬度坐标 可选
					identity_card_data: '', // string  可选 身份证图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
					
					student_card_data: '', // string  可选 学生证图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
					asset_certificate_data: '', // string  可选 资产证明图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
					// credit_report_data: '', // string  可选 征信报告图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
					
					is_club_card: 0, // integer  可选 是否社团成员，1是；0否
					club_card_data: '', // string  可选 社团图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
				},
				rule: [
					{ name: "linkman",checkType: "notnull",checkRule: "",errorMsg: "请输入真实姓名" },
					{ name: "phone",checkType: "notnull",checkRule: "",errorMsg: "请输入真实手机号" },
					{ name: "id_card_no",checkType: "notnull",checkRule: "",errorMsg: "请输入身份证号" },
					{ name: "province",checkType: "notnull",checkRule: "",errorMsg: "请选择代理点区域" },
					{ name: "name",checkType: "notnull",checkRule: "",errorMsg: "请输入学校名称" },
					{ name: "address",checkType: "notnull",checkRule: "",errorMsg: "请输入学校地址" },
					
					{ name: "identity_card_data",checkType: "notnull",checkRule: "",errorMsg: "请上传身份证图片" },
					{ name: "student_card_data",checkType: "notnull",checkRule: "",errorMsg: "请上传学生证图片" },
					{ name: "asset_certificate_data",checkType: "notnull",checkRule: "",errorMsg: "请上传资产证明图片" },
					// { name: "credit_report_data",checkType: "notnull",checkRule: "",errorMsg: "请上传征信报告图片" },
				],
				historyInfo: {}
			};
		},
		mounted() {
			this.agentGetHistoryInfo()
		},
		methods: {
			// 上传身份证图片
			handleUpload(files, key) {
				this.formData[key] = files.map(item=> ({url: item.url}))
			},
			// 删除身份证图片
			handleRemove({files}, key) {
				this.formData[key] = files.map(item=> ({url: item.url}))
			},
			// 选择区域
			handleSeleteArea(value) {
				this.formData.province = value.names[0] // string  省 可选
				this.formData.provinceCode = value.codes[0] // string  省编号 可选
				this.formData.city = value.names[1] // string  市 可选
				this.formData.cityCode = value.codes[1] // string  市编号 可选
				this.formData.area = value.names[2] // string  区/县 可选
				this.formData.areaCode = value.codes[2] // string  区/县编号 可选
				this.area = `${value.names[0]}/${value.names[1]}/${value.names[2]}`
			},
			openArea() {
				this.$refs.area.open()
			},
			// 获取历史信息
			agentGetHistoryInfo() {
				this.$api.agentGetHistoryInfoApi().then(res=> {
					this.historyInfo = res.data
					this.formData = {
						status: res.data.status, // integer  可选 状态：0草稿；1正式 示例值: 1
						name: res.data.name, // string  名称 可选
						id_card_no: res.data.id_card_no, // string  身份证号 可选
						linkman: res.data.linkman, // string  姓名 可选
						phone: res.data.phone, // string  联系电话 可选
						province: res.data.province, // string  省 可选
						provinceCode: res.data.provinceCode, // string  省编号 可选
						city: res.data.city, // string  市 可选
						cityCode: res.data.cityCode, // string  市编号 可选
						area: res.data.area, // string  区/县 可选
						areaCode: res.data.areaCode, // string  区/县编号 可选
						address: res.data.address, // string  可选 详细地址（200字内）
						
						longitude: res.data.longitude, // number  经度坐标 可选
						latitude: res.data.latitude, // number  纬度坐标 可选
						identity_card_data: res.data.identity_card_data ? res.data.identity_card_data.split(',').map(item=> ({url: item})) : [], // string  可选 身份证图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
						
						student_card_data: res.data.student_card_data ? res.data.student_card_data.split(',').map(item=> ({url: item})) : [], // string  可选 学生证图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
						asset_certificate_data: res.data.asset_certificate_data ? res.data.asset_certificate_data.split(',').map(item=> ({url: item})) : [], // string  可选 资产证明图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
						// credit_report_data: res.data.credit_report_data ? res.data.credit_report_data.split(',').map(item=> ({url: item})) : [], // string  可选 征信报告图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
						
						is_club_card: res.data.is_club_card, // integer  可选 是否社团成员，1是；0否
						club_card_data: res.data.club_card_data ? res.data.club_card_data.split(',').map(item=> ({url: item})) : [], // string  可选 社团图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
					}
					
					console.log('formData', this.formData)
				}).catch(err=> {
					console.log('err', err);
				}).finally(()=> {
					this.$emit('getInfo', this.historyInfo)
				})
			},
			mywitch(value) {
				this.formData.is_club_card = value ? 1 : 0
			},
			save() {
				this.formData.status = 0
				this.onSubmit()
			},
			next() {
				this.formData.status = 1
				this.onSubmit()
			},
			onSubmit() {
				if (this.formData.is_club_card) {
					this.rule.push({ name: "club_card_data",checkType: "notnull",checkRule: "",errorMsg: "请上传社团图片" })
				} else {
					this.rule = this.rule.filter(item=> item.name !== "club_card_data")
				}
				const formData = {...this.formData}
				formData.identity_card_data = formData.identity_card_data.map(item=> item.url).join(',')
				formData.student_card_data = formData.student_card_data.map(item=> item.url).join(',')
				formData.asset_certificate_data = formData.asset_certificate_data.map(item=> item.url).join(',')
				// formData.credit_report_data = formData.credit_report_data.map(item=> item.url).join(',')
				formData.club_card_data = formData.is_club_card ? formData.club_card_data.map(item=> item.url).join(',') : ''
				const checkRes = checker.check(formData, this.rule);
				if (checkRes) {
					this.handleSubmit(formData)
				} else {
					uni.showToast({
						title: checker.error,
						icon: "none"
					});
				}
			},
			handleSubmit(formData) {
				this.$api.agentSetApplyInfoApi(formData).then(res=> {
					if (formData.status === 1) {
						this.$emit('next', formData)
					} else {
						uni.showToast({
							title: '保存成功'
						})
						setTimeout(()=> {
							uni.navigateBack()
						}, 1200)
					}
				}).catch(err=> {
					console.log('err', err);
				})
			},
			chooseLocation(status) {
				if (status || !this.formData.address) {
					uni.chooseLocation({
						success: (res)=> {
							const result = AddressParse.parse(res.address);
							this.formData.province = result[0].province
							this.formData.city = result[0].city
							this.formData.area = result[0].area
							
							this.formData.latitude = res.latitude
							this.formData.longitude = res.longitude
							this.formData.address =  res.name
							
							this.getAreaCode()
						},
						fail: (err) => {
							console.log('err', err);
						}
					});
				}
			},
			getAreaCode() {
				const provinceIndex = provinceData.findIndex(item=> item.label === this.formData.province)
				const cityIndex = cityData[provinceIndex].findIndex(item=> item.label === this.formData.city)
				const areaIndex = areaData[provinceIndex][cityIndex].findIndex(item=> item.label === this.formData.area)
				
				if (provinceIndex !== -1 && provinceData[provinceIndex]) {
					this.formData.provinceCode = provinceData[provinceIndex].value
					
					// console.log('provinceCode', this.formData.provinceCode);
					if (cityIndex !== -1 && cityData[provinceIndex][cityIndex]) {
						this.formData.cityCode = cityData[provinceIndex][cityIndex].value
						// console.log('cityCode', this.formData.cityCode);
						
						if (areaIndex !== -1 && areaData[provinceIndex][cityIndex][areaIndex]) {
							this.formData.areaCode = areaData[provinceIndex][cityIndex][areaIndex].value
							// console.log('areaCode', this.formData.areaCode);
						}
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-lists {
		flex: 1;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
	}
	
	.agent-form-wrap {
		padding: 0 32rpx;
		padding-bottom: calc(200rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	}

	.hint {
		font-size: 24rpx;
		font-weight: 400;
		text-align: left;
		line-height: 40rpx;
		padding-bottom: 10rpx;
		color: rgba(0, 0, 0, 0.4);
	}

	.form-card {
		padding: 32rpx;
		margin-bottom: 32rpx;
		border-radius: 12rpx;
		background-color: #FFFFFF;

		.card-title {
			font-size: 34rpx;
			font-weight: 600;
			text-align: left;
			line-height: 46rpx;
			padding-bottom: 32rpx;
			color: rgba(0, 0, 0, 1);
		}

		.sub-title {
			font-size: 26rpx;
			font-weight: 600;
			text-align: left;
			line-height: 48rpx;
			padding-left: 16rpx;
			color: rgba(0, 0, 0, 0.4);
		}

		.form {
			padding-top: 32rpx;

			.form-item {
				padding-bottom: 32rpx;

				&:last-child {
					padding-bottom: 0;
				}
			}

			.form-label {
				font-size: 28rpx;
				font-weight: 400;
				text-align: left;
				line-height: 44rpx;
				padding-bottom: 8rpx;
				color: rgba(0, 0, 0, 0.9);
			}

			.form-body {
				padding-bottom: 12rpx;
				border-bottom: 1px solid #E7E7E7;
			}

			.input {
				width: 100%;
				height: 72rpx;
				display: flex;
				align-items: center;

				input {
					flex: 1;
					height: 100%;
				}
			}

			.hint {
				font-size: 24rpx;
				font-weight: 400;
				text-align: left;
				line-height: 40rpx;
				padding-bottom: 10rpx;
				color: rgba(0, 0, 0, 0.4);
			}

			.right-btn {
				position: relative;
				padding: 0 32rpx;
				height: 48rpx;
				color: var(--primary-color);
				font-size: 32rpx;
				font-weight: 400;
				line-height: 48rpx;
				text-align: center;
				line-height: 48rpx;

				&:before {
					position: absolute;
					content: '';
					top: 5%;
					left: 0;
					bottom: 0;
					width: 1px;
					height: 90%;
					background-color: #E7E7E7;
				}
			}
		}
	}

	.footer-btns {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		z-index: 999;
		padding: 20rpx 32rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		box-shadow: 0px 0px 33rpx rgba(0, 0, 0, 0.05);
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		gap: 14rpx;
		display: flex;
		align-items: center;

		.cancel {
			width: 178rpx;
			height: 82rpx;
			border: 1px solid var(--primary-color);

			color: var(--primary-color);
			font-size: 34rpx;
			font-weight: 400;
			line-height: 82rpx;
			text-align: center;
		}

		.confirm {
			flex: 1;
			height: 82rpx;
			border: 1px solid var(--gradient-color-vertical);
			background: var(--gradient-color-vertical);

			font-size: 34rpx;
			font-weight: 400;
			line-height: 82rpx;
			text-align: center;
			color: #FFFFFF;
		}
	}
</style>